<template>
	<view style="overflow-x: hidden;overflow-y: hidden;overflow: hidden;">
		<view class="fixed">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">骑行详情</block>
			</cu-custom>
		</view>
		<view>
				<view class="cu-list menu ">
					<view class="cu-item">
						<view class="content">
							<text class="cuIcon-post margin-top-xs"></text>
							<text class="title margin-top-xs">发布内容</text>
							<textarea class="text-grey margin-top-xs" style="width: 100%;height: 130px;" disabled
								v-model="content"></textarea>
						</view>
					</view>	
					<view class="cu-item" @click="call">
						<view class="content">
							<text class="title cuIcon-phone text-xxl"></text><text class="title ">联系电话</text>
							<text class="text-grey margin-left">{{phone}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="title cuIcon-time"></text><text class="title ">出发时间</text>
							<text class="text-grey margin-left">{{startTime}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content margin-top-xs "><text class="cuIcon-repeal"></text><text
								class="title ">骑行线路</text>
							<text class="text-grey margin-left"><text class="text-blue">{{start.title}}</text><text
									class="cuIcon-order"></text><text class="text-red">{{dest.title}}</text></text>
						</view>
					</view>
					<map id="102" :longitude="centerPoint.longitude" :latitude="centerPoint.latitude"
						style="width: 100%; height: 500px;" :markers="markers" :polyline="polyline">
					</map>
				</view>
		</view>
	</view>
</template>

<script>
	var QQMap = require('@/static/js/QQMap.js')
	var http =require('@/static/utils/request.js')
	import dragButton from '@/components/drag-button/drag-button.vue'
	export default {
		data() {
			return {
				content: "",
				phone: "",
				id: '',
				centerPoint: {
					longitude: 108.93984,
					latitude: 34.34127
				},
				markers: [],
				polyline: [],
				start: {
					title: '清华科技园',
					latitude: 34.34127,
					longitude: 108.93984
				},
				dest: {
					title: '春晓华苑',
					latitude: 34.34127,
					longitude: 108.93984
				},
				startTime: '2021-04-05 12:30',
				mapContext:{}
			}
		},
		props:{
			detail:{
				type:Object,
				default:{}
			}
		},
		components: {
			dragButton
		},
		mounted() {
			let that = this
			let startLon = that.centerPoint.longitude
			let startLat = that.centerPoint.latitude
		},
		methods: {
			call() {},
			btnClick() {

			},
			btnTouchstart() {

			},
			btnTouchend() {

			}
		},
		onLoad(option) {
			let _this = this
			_this.mapContext = uni.createMapContext("102",this)
			this.$data.id = option.item
			http.getInvitionDetail(option.item).then(res=>{
				let data = res.data.data
				_this.$props.detail = data
				_this.phone = data.contractPhone
				_this.startTime = data.startTime
				_this.content = data.content
				_this.start = data.startingPoint
				_this.dest = data.destination
				_this.id = data.id
				_this.polyline.push(JSON.parse(data.line))
				_this.mapContext.includePoints({
					points:_this.polyline[0].points,
					padding:[30,30,30,30]
				})
			}).catch(err=>{
				
			})
			
			
		}
	}
</script>

<style>
	.drag {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: orange;
		box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
		color: $uni-text-color-inverse;
		width: 80%;
		height: 100upx;
		border-radius: 10%;
		font-size: 80upx;
		position: fixed;
		z-index: 999999;
		top: 800px;
		left: 5px;
	}
</style>
